{% extends 'base-layer.html' %}
{% load staticfiles %}

{% block css %}
    <link href="{% static 'plugins/layui/css/layui.css' %}" rel="stylesheet">
{% endblock %}
{% block main %}
    <div class="box box-danger">
        <form class="form-horizontal layui-form">
            {% csrf_token %}

            <div class="box-body">
                <input type="hidden" name="mac_addr" value="{{ mac_addr }}">

                <div class="layui-form-item">
                    <label class="layui-form-label">账户：</label>
                    <div class="layui-input-block">
                        <select name="cate1" id="cate1" lay-filter="cate1" required>
                            <option value="">选择账户</option>

                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">线路：</label>
                    <div class="layui-input-block">
                        <select name="cate2" id="cate2" lay-filter="cate2" required>
                            <option value="">选择线路</option>

                        </select>
                    </div>
                </div>

            </div>

            <div class="box-footer ">
                <div class="row span7 text-center ">
                    <button type="button" id="btnCancel" class="btn btn-default margin-right ">重置</button>
                    <button type="button" id="btnSave" class="btn btn-info margin-right ">保存</button>
                </div>
            </div>
        </form>

    </div>
{% endblock %}

{% block javascripts %}
    <script src="{% static 'plugins/layui/layui.js' %}"></script>
    <script src="{% static 'plugins/js.cookie.js' %}"></script>
    <script type="text/javascript">
        layui.use(['table', 'form'], function () {
            var form = layui.form;
            form.render();

            // 请求数据
            var results;
            var csrftoken = Cookies.get('csrftoken');
            $.ajax({
                url: "{% url 'system:device-account-line' %}",
                type: 'post',
                headers: {"X-CSRFToken": csrftoken},
                cache: false,
                success: function (resp) {
                    if (resp.code === 0) {
                        for (var item in resp.data) {
                            var option_elem = document.createElement("option");
                            option_elem.innerHTML = item;
                            $('#cate1').append(option_elem);
                        }
                        form.render('select');
                    }
                    results = resp.data;
                }
            });

            // 监听下拉框
            form.on("select(cate1)", function () {
                var choices = $('#cate1').val();    // 选择的账户
                $('#cate2').empty();    // 清空

                var option_elem1 = document.createElement("option");
                option_elem1.innerHTML = "选择线路";
                $('#cate2').append(option_elem1);

                for (var i in results[choices]) {
                    var option = document.createElement("option");
                    option.innerHTML = results[choices][i];
                    $('#cate2').append(option);
                }

                form.render('select');

            })

        });


        // 保存、绑定
        $('#btnSave').click(function () {

        });

        /*点取消刷新新页面*/
        $("#btnCancel").click(function () {
            window.location.reload();

        });

    </script>

{% endblock %}
